<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input class="hobby" type="checkbox" name=""  value="" />讲究
		<input class="hobby" type="checkbox" name=""  value="" />讲究2
		<input class="hobby" type="checkbox" name=""  value="" />讲究3
		<br />
		<input type="checkbox" id="check_all" />全选
		<script type="text/javascript">
			//全选选中，前面的爱好都选中
			//全选没选中，全面的爱好都不选中
			//.checked属性 表示选中状态、遍历数组 设置属性值
			//获取全选标签
			var check_all=document.getElementById('check_all');
			//绑定 点击事件 /change事件
			check_all.onchange=function(){
			//获取到全选的选中状态 checked属性
			var status=check_all.checked;
//			var status=this.checked;
//			console.log(status);//选中true 没选中false
			//获取所有的爱好的的checkbox标签
			var hobbys=document.querySelectorAll('.hobby');
//			对每一个爱好的标签,需要设置checked属性
//          遍历数组
            for(var i=0;i<hobbys.length;i++){
            	//console.log(hobbys[i]);
            	
            	hobbys[i].checked=status;
            	
//          	if(status==true){
//          		hobbys[i].checked=true;
//          	}else{
//          		hobbys[i].checked=false;
//          	}
            }
             }
		</script>
	</body>
</html>
